<!--  eslint-disable prettier/prettier -->
<template>
  <div class="index">
    <!-- <div class="header-title">易为教育2021年学历报名表</div> -->
    <van-cell-group style="margin-top: 0.1rem">
      <van-cell title="个人信息" center title-class="green-title-class" />
      <!-- 姓名 -->
      <van-cell
        @click="handelHideInput('name')"
        v-show="!hideStatus.name"
        title="姓名"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.name ? form.name : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.name"
        v-model="form.name"
        ref="name"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="姓名"
        @blur="formValueChange('name')"
        placeholder="请输入姓名"
      />
      <!-- 性别 -->
      <van-cell
        @click="handelHideCascader('gender')"
        title="性别"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ gender_text ? gender_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.gender" round position="bottom">
        <van-cascader
          v-model="form.gender"
          title="请选择性别"
          :options="genderOptions"
          @close="hideStatus.gender = false"
          @finish="({ selectedOptions }) => onFinish(selectedOptions, 'gender')"
        />
      </van-popup>
      <!-- 民族 -->
      <van-cell
        @click="handelHideCascader('nation')"
        title="民族"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ nation_text ? nation_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.nation" round position="bottom">
        <van-cascader
          v-model="form.nation"
          title="请选择民族"
          :field-names="{ text: 'text', value: 'text', children: 'children' }"
          :options="nationOptions"
          @close="hideStatus.nation = false"
          @finish="({ selectedOptions }) => onFinish(selectedOptions, 'nation')"
        />
      </van-popup>
      <!-- 户口所在地 -->
      <van-cell
        @click="handelHideCascader('hk_adress')"
        title="户口所在地 (市区)"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ hk_adress_text ? hk_adress_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.hk_adress" round position="bottom">
        <van-area
          title="户口所在地"
          @confirm="e => areaConfirm(e, 'hk_adress')"
          :area-list="hkAddressOptions"
        />
      </van-popup>
      <!-- 手机号码 -->
      <van-cell
        @click="handelHideInput('phone')"
        v-show="!hideStatus.phone"
        title="手机号码"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <div v-if="phoneStatus" class="red">
          <div>{{ form.phone }}</div>
          <div style="font-size: 0.18rem">*请输入正确的手机号码</div>
        </div>
        <span v-else>
          {{ form.phone ? form.phone : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.phone"
        v-model="form.phone"
        ref="phone"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="手机号码"
        @blur="formValueChange('phone')"
        placeholder="请输入手机号码"
      />
      <!-- 身份证号码 -->
      <van-cell
        @click="handelHideInput('IDcard')"
        v-show="!hideStatus.IDcard"
        title="身份证号码"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.IDcard ? form.IDcard : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.IDcard"
        v-model="form.IDcard"
        ref="IDcard"
        center
        size="large"
        label-class="title-class"
        label-width="1.5rem"
        label="身份证号码"
        @blur="formValueChange('IDcard')"
        placeholder="请输入身份证号码"
      />
    </van-cell-group>

    <!-- 学历信息 -->

    <van-cell-group style="margin-top: 0.1rem">
      <van-cell title="学历信息" center title-class="green-title-class" />
      <!-- 前置学历层次 -->
      <van-cell
        @click="handelHideCascader('education_bg')"
        title="前置学历层次"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ education_bg_text ? education_bg_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.education_bg" round position="bottom">
        <van-cascader
          v-model="form.education_bg"
          title="请选择前置学历层次"
          :options="educationBgOptions"
          @close="hideStatus.education_bg = false"
          @finish="
            ({ selectedOptions }) => onFinish(selectedOptions, 'education_bg')
          "
        />
      </van-popup>
      <!-- 毕业院校 -->
      <van-cell
        @click="handelHideInput('graduationSchool')"
        v-show="!hideStatus.graduationSchool"
        title="毕业院校"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.graduationSchool ? form.graduationSchool : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.graduationSchool"
        v-model="form.graduationSchool"
        ref="graduationSchool"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="毕业院校"
        @blur="formValueChange('graduationSchool')"
        placeholder="请输入毕业院校"
      />
      <!-- 毕业专业 -->
      <van-cell
        @click="handelHideInput('graduationProfession')"
        v-show="!hideStatus.graduationProfession"
        title="毕业专业"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.graduationProfession ? form.graduationProfession : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.graduationProfession"
        v-model="form.graduationProfession"
        ref="graduationProfession"
        center
        size="large"
        label-class="title-class"
        label-width="1rem"
        label="毕业专业"
        @blur="formValueChange('graduationProfession')"
        placeholder="请输入毕业专业"
      />
      <!-- 毕业时间 -->
      <van-cell
        @click="handelHideCalendar('graduationTime', 1)"
        title="毕业时间"
        center
        is-link
        value="请选择"
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ form.graduationTime ? form.graduationTime : "请选择" }}
        </span>
      </van-cell>
      <van-calendar
        :min-date="minDate"
        :max-date="maxDate"
        :default-date="
          form.graduationTime ? new Date(form.graduationTime) : new Date()
        "
        title="毕业时间"
        v-model="hideStatus.graduationTime"
        @confirm="date => onConfirm(date, 'graduationTime')"
      />
      <!-- 毕业证书编号 -->
      <van-cell
        @click="handelHideInput('graduationID')"
        v-show="!hideStatus.graduationID"
        title="毕业证书编号"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
      >
        <span>
          {{ form.graduationID ? form.graduationID : "请输入" }}
        </span>
      </van-cell>
      <van-field
        v-show="hideStatus.graduationID"
        v-model="form.graduationID"
        ref="graduationID"
        center
        size="large"
        label-class="title-class"
        label-width="1.5rem"
        label="毕业证书编号"
        @blur="formValueChange('graduationID')"
        placeholder="请输入毕业证书编号"
      />
    </van-cell-group>

    <!-- 报考信息 -->

    <van-cell-group style="margin-top: 0.1rem">
      <van-cell title="报考信息" center title-class="green-title-class" />
      <!-- 首选考试县区 -->
      <van-cell
        @click="handelHideCascader('exam_address')"
        title="首选考试区县(市区)"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ exam_address_text ? exam_address_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup v-model="hideStatus.exam_address" round position="bottom">
        <van-area
          title="首选考试区县"
          @confirm="e => areaConfirm(e, 'exam_address')"
          :area-list="hkAddressOptions"
        />
      </van-popup>
      <!-- 备选考试县区 -->
      <van-cell
        @click="handelHideCascader('standby_exam_address')"
        title="备选考试区县(市区)"
        center
        is-link
        size="large"
        title-class="title-class"
        value-class="value-class"
      >
        <span>
          {{ standby_exam_address_text ? standby_exam_address_text : "请选择" }}
        </span>
      </van-cell>
      <van-popup
        v-model="hideStatus.standby_exam_address"
        round
        position="bottom"
      >
        <van-area
          title="备选考试区县"
          @confirm="e => areaConfirm(e, 'standby_exam_address')"
          :area-list="hkAddressOptions"
        />
      </van-popup>
      <!-- 报读院校 -->
      <van-cell
        title="报读院校"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
        :value="form.school ? form.school : '还未报名'"
      ></van-cell>
      <!-- 报读专业 -->
      <van-cell
        title="报读专业"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
        :value="form.profession ? form.profession : '还未报名'"
      ></van-cell>
      <!-- 报读层次 -->
      <van-cell
        title="报读层次"
        center
        size="large"
        title-class="title-class"
        value-class="value-class value-margin"
        :value="form.level ? form.level : '还未报名'"
      ></van-cell>
      <!-- 收件信息 -->
      <van-field
        label="收件信息"
        type="textarea"
        v-model="form.take_info"
        autosize
        maxlength="50"
        show-word-limit
        size="large"
        label-class="title-class"
        label-width="1rem"
        placeholder="请输入收件信息"
      />
    </van-cell-group>
    <van-button
      type="primary"
      :class="completeAll ? '' : 'huise'"
      @click="handelSubmit"
      round
      block
    >
      提交报名
    </van-button>
    <div class="nav" @click="$router.go(-1)">返回</div>
  </div>
</template>
<script>
//eslint-disable prettier/prettier
import moment from "moment";
import axios from "axios";
import { areaList } from "@vant/area-data";
import nation from "./nation.json";
// 统一加上headers
axios.interceptors.request.use(
  // eslint-disable-next-line prettier/prettier
  function (config) {
    // Do something before request is sent
    // console.log(config);
    config.headers = {
      version: "v1",
      "api-access-token": "ca87846db16a561b97c767e0624513f947f52345"
    };
    return config;
  },
  // eslint-disable-next-line prettier/prettier
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);
export default {
  data() {
    return {
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2035, 0, 1),
      baseData: null,
      // 输入框的显示 (true) 和隐藏 (false)
      hideStatus: {
        // 姓名
        name: false,
        // 性别
        gender: false,
        // 民族
        nation: false,
        // 户口所在地
        hk_adress: false,
        // 手机号码
        phone: false,
        // 身份证号码
        IDcard: false,
        // 前置学历
        education_bg: false,
        // 毕业院校
        graduationSchool: false,
        // 毕业专业
        graduationProfession: false,
        // 毕业时间
        graduationTime: false,
        // 毕业证书编号
        graduationID: false,
        // 首选考试县区
        exam_address: false,
        // 备选考试县区
        standby_exam_address: false
      },
      // 最终要提交的信息
      form: {
        // 学生姓名
        name: "",
        // 性别
        gender: 0,
        // 民族
        nation: "",
        // 户口所在地
        hk_adress: [],
        // 手机号码
        phone: "",
        // 身份证号码
        IDcard: "",
        // 前置学历
        education_bg: 0,
        // 毕业院校
        graduationSchool: "",
        // 毕业专业
        graduationProfession: "",
        // 毕业时间
        graduationTime: "",
        // 毕业证书编号
        graduationID: "",
        // 首选考试县区
        exam_address: [],
        // 备选考试县区
        standby_exam_address: [],
        // 报读院校
        school: "还未报名",
        // 报读专业
        profession: "还未报名",
        // 报读层次
        level: "还未报名",
        // 收件信息
        take_info: ""
      },

      // 性别显示的文字
      gender_text: "",
      // 民族显示的文字
      nation_text: "",
      // 民族显示的文字
      hk_adress_text: "",
      // 前置学历显示的文字
      education_bg_text: "",
      // 首选考试县区
      exam_address_text: "",
      // 备选考试县区
      standby_exam_address_text: "",

      // 性别的数据源
      genderOptions: [],
      // 民族的数据源
      nationOptions: nation,
      // 户口所在地数据源
      hkAddressOptions: areaList,
      // 前置学历数据源
      educationBgOptions: [{ text: "专科", value: 0 }],

      // 输入的手机号码的正误
      phoneStatus: false
    };
  },
  watch: {},
  computed: {
    // 是否填写完成 true 完成 false 没完成
    completeAll() {
      let isNull = true;
      for (let item in this.form) {
        const field = this.form[item];
        // console.log(field, 11111);
        if (field === "" || field == null) isNull = false;
        if (field instanceof Array && field.length < 0) isNull = false;
      }
      if (this.phoneStatus) isNull = false;
      return isNull;
    }
  },

  mounted() {
    // baseUrl;
    // this.form.gender = 1;
    // 请求页面的需要的一些数据
    axios("/api/student/apply").then(res => {
      // console.log(res);
      if (res.data.code !== 200) {
        this.$toast(res.data.msg || "出错了哦,请联系技术~");
        return false;
      }
      const data = res.data.data;
      this.baseData = data;
      console.log(data, "请求的数据");
      this.form.collection_unit = data.collection_unit;
      // 性别的数据源
      this.genderOptions = data.genders.map((item, index) => ({
        text: item,
        value: index
      }));
      // 学校的数据源
      this.schoolOptions = data.info.map(item => ({
        text: item.title,
        value: item.id,
        child: item.children
      }));
    });
  },
  methods: {
    // 地区选择器选择变化
    areaConfirm(val, refName) {
      console.log(val, "jsbndfjbdsjfb");
      this.form[refName] = val;
      this[`${refName}_text`] = val[1].name + val[2].name;
      this.hideStatus[refName] = !this.hideStatus[refName];
    },
    // 隐藏和显示输入框
    handelHideInput(refName) {
      console.log(refName, "refName");
      this.hideStatus[refName] = !this.hideStatus[refName];
      setTimeout(() => {
        this.$refs[refName].focus();
      });
    },
    // 输入框变化时
    formValueChange(filedName) {
      // 校验手机
      if (
        filedName === "phone" &&
        !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)
      ) {
        this.phoneStatus = true;
      } else if (filedName === "phone") {
        this.phoneStatus = false;
      }
      this.hideStatus[filedName] = !this.hideStatus[filedName];
    },
    // 控制要先选学校再选层次再选专业
    handelHideCascader(filedName) {
      if (filedName === "level" && !this.school_text) {
        this.$toast("请先选择院校哦~");
        return;
      }

      if (filedName === "profession" && !this.school_text) {
        console.log(this.form.school);
        this.$toast("请先选择院校哦~");
        return;
      }
      if (filedName === "profession" && !this.level_text) {
        this.$toast("请先选择层次哦~");
        return;
      }
      this.hideStatus[filedName] = !this.hideStatus[filedName];
    },
    /**
     * 显示和隐藏日期组件
     * filedName:字段的名称
     * isDisabled:是否是禁用的 false 禁用
     */
    handelHideCalendar(filedName, isDisabled) {
      if (!isDisabled) return;
      // filedName 为数字时为 缴费方式2
      if (typeof filedName === "number")
        this.hideStatus.dateList = this.hideStatus.dateList.map(
          (item, index) => {
            if (index === filedName) return true;
            else return item;
          }
        );
      else this.hideStatus[filedName] = true;
    },
    // 日期选择的变化
    onConfirm(date, filedName) {
      // console.log(date, filedName);
      this.form[filedName] = moment(date).format("YYYY-MM-DD");
      this.hideStatus[filedName] = false;
    },
    // 院校或者层次或者专业择完成后触发
    onFinish(selectedOptions, filedName) {
      console.log(selectedOptions);
      this.hideStatus[filedName] = false;
      this[filedName + "_text"] = selectedOptions
        .map(option => option.text)
        .join("");
      // console.log(this.form[filedName]);
    },
    // 提交报名
    handelSubmit() {
      console.log(this.form, "form");
      // console.log(this.completeAll, "this.completeAll");

      if (!this.completeAll) {
        this.$toast("请先填写完整数据才能提交哦~");
        return false;
      }
      this.loading1 = true;
      let form = {
        ...this.form,
        exam_address: this.form.exam_address.map(item => item.name).join(","),
        hk_adress: this.form.hk_adress.map(item => item.name).join(","),
        standby_exam_address: this.form.standby_exam_address
          .map(item => item.name)
          .join(",")
        // TODO: education_bg
      };
      console.log(form);
    }
  }
};
</script>
<style lang="less">
.index {
  .huise {
    background-color: #bbb !important;
    border: 1px solid #bbb !important;
  }
  .orange {
    color: #ff5400 !important;
  }
  .red {
    color: #ff0000 !important;
  }
  .van-button--block {
    width: 3.48rem;
    height: 0.7rem;
    margin: 0.55rem auto;
  }
  .van-radio--horizontal:last-child {
    margin-right: 0;
  }
  .van-radio-group--horizontal {
    justify-content: flex-end;
  }
  .van-radio__icon {
    display: flex;
    align-items: center;
  }
  .img-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.16rem;
    height: 0.16rem;
    border: 1px solid #00be8b;
    border-radius: 50%;
    & > div {
      width: 0.08rem;
      height: 0.08rem;
      background: #00be8b;
      border-radius: 50%;
    }
  }
  .van-cell--clickable:active {
    background-color: #fff;
  }
  background-color: #f1f1f1;
  min-height: 100vh;
  padding-bottom: 1px;
  box-sizing: border-box;
  overflow: auto;
  .header-title {
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    font-size: 0.28rem;
    color: #333333;
    font-weight: bold;
    font-family: PingFang SC;
  }
  .title-class {
    font-size: 0.24rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .green-title-class {
    font-size: 0.26rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #00b584;
  }
  .value-class {
    font-size: 0.24rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
  .value-margin {
    margin-right: 20px;
  }
  .value-flex {
    flex: 3 !important;
  }
  .table {
    font-size: 0.18rem;
    margin: 0 36px 0 16px;
  }
  .tr {
    display: flex;
    height: 0.49rem;
    line-height: calc(0.49rem - 1px);
    border-bottom: 1px solid #aaa;
    &:first-child {
      border-top: 1px solid #aaa;
      height: 0.6rem;
      line-height: calc(0.6rem - 2px);
    }
    .td,
    .th {
      width: calc((7.5rem - 52px - 2.2rem - 4px) / 4);
      border-right: 1px solid #aaa;
      text-align: center;
    }
    .td:first-child,
    .th:first-child {
      width: calc(2.2rem - 2px);
      border-left: 1px solid #aaa;
    }
  }
  .item-wrapper {
    display: flex;
    margin: 0 0.9rem;
    justify-content: space-between;
    div {
      width: 32%;
      text-align: center;
    }
    // div:nth-child(2) {
    //   text-align: center;
    // }
  }
  .nav {
    position: fixed;
    bottom: 20%;
    right: 0;
    border-radius: 0.15rem 0 0 0.15rem;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background-color: #78a4ff;
    color: #fff;
    font-size: 0.26rem;
  }
}
</style>
